<template>
    <div>
      <el-table
        :data="List"
        border
        style="width: 100%">
        <el-table-column
          prop="uid"
          label="客户id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="客户昵称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tti.name"
          label="客户姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tti.phone"
          label="客户联系电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tti.address"
          label="客户联系地址"
          width="180">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
        >
        <template slot-scope="scope">
            <div>
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看购买历史</el-button>
            </div>
      </template>
    </el-table-column>
      </el-table>
      <el-dialog title="购买历史" :visible.sync="dialogTableVisible">
        <el-table :data="List2">
          <el-table-column
            prop="axe.name"
            label="商品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="info.gnum"
            label="交易数量"
            width="180">
          </el-table-column>
          <el-table-column
            prop="info.bname"
            label="买家姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="seller.nickname"
            label="卖家昵称"
            width="180">
          </el-table-column>
          <el-table-column
          :formatter="formatterType2"
            prop="info.otype"
            label="订单类型"
            width="180">
          </el-table-column>
          <el-table-column
          :formatter="formatterType"
            prop="info.ostate"
            label="交易情况"
            width="180">
          </el-table-column>
          <el-table-column
            prop="info.stime"
            label="订单开始时间">
          </el-table-column>
          <el-table-column
            prop="info.etime"
            label="交易完成时间">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </template>
  <script>
  export default {
      name:'ClientsInfo',
      data(){
          return{
              orderList:[       
              ],
              clientInfo:[       
              ],
              dialogTableVisible:false
          }
      },
      methods:{
          async getHistoryOrder(){
              await this.$axios.get("/api/clients",{
                params:{
                    pageNum:1,
                    pageSize:20
                }}).then(res =>{
                  this.orderList=res.data.data;
                }).catch(error =>{
                 // console.log('提交失败')
                  //console.log(error )
                })
              
          },
          handleClick(row){
            this.dialogTableVisible = true
            this.$axios.get("/api/getOrderByPhone",{
              params:{
                phone:row.tti.phone
              }}).then(res =>{
                this.clientInfo=res.data.data;
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
            },
          formatterType(row){
            switch(row.info.ostate){
              case '0':
                return '未接收'
              case '1':
                return '交易成功'
              case '2':
                return '接收订单'
              case '3':
                return '交易失败'
              case '4':
                return '拒绝交易'
              default:
                return ''
            }
          },
          formatterType2(row){
            switch(row.info.otype){
              case 0:
                return '购买'
              case 1:
                return '租借'
              default:
                return ''
            }
          },
          
      },
      computed:{
          List(){
              if(this.orderList){
                  const  lt= JSON.parse(JSON.stringify(this.orderList));
                  //console.log(lt)
                  return lt
              }else{
                  const  lt=[]
                  return lt;
              }   
        },
        List2(){
              if(this.clientInfo){
                  const  lt= JSON.parse(JSON.stringify(this.clientInfo));
                  //console.log(lt)
                  return lt
              }else{
                  const  lt=[]
                  return lt;
              }   
        }
      },
      mounted(){
          this.getHistoryOrder()
      }
  }
  </script>
  <style>
  
  </style>
  